<template>
  <div class="con_store_main">
    <!-- 确认进货订单弹窗 -->
    <el-dialog title="填写进货信息" :visible.sync="supplyClothesBox" width="55%" :close-on-click-modal="true" center>
      <div class="dialog-content-container">
        <div v-for="item in selectedRows" :key="item.clothesId">
          <div>
            <span class="supply-span"> 品牌:{{ item.brand }} </span>
            <span class="supply-span"> 类别:{{ item.categoryName }} </span>
            <span class="supply-span"> 编码:{{ item.code }} </span>
          </div>
          <div class="supply-input">
            <el-form :inline="true" ref="formRef">
              <el-form-item prop="inputPrice" label="价格">
                <el-input style="
                height: 45px;
                width: 200px;
                margin-right: 12px;
                margin-top: 4px;
              " v-model="item.inputPrice" placeholder="请输入价格"></el-input>
              </el-form-item>

              <el-form-item prop="inputQuantity" label="数量">
                <el-input-number style="margin-top: 4px" v-model="item.inputQuantity" label="描述文字">
                </el-input-number>

              </el-form-item>
            </el-form>
          </div>
        </div>
        <el-button plain @click="confirmSupply">确定进货<i class="el-icon-shopping-cart-full el-icon--right"></i>
        </el-button>
      </div>
    </el-dialog>
    <div v-show="clothesTable">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="服装品牌">
          <el-input v-model="formInline.brand" placeholder="输入品牌进行查询……"></el-input>
        </el-form-item>
        <el-form-item label="服装编码">
          <el-input v-model="formInline.code" placeholder="输入服装编码……"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="findData" type="primary" icon="el-icon-search">搜索</el-button>
          <el-button @click="supply" type="primary" v-show="supplyButton">进货<i
              class="el-icon-shopping-cart-full el-icon--right"></i>
          </el-button>
          <el-button v-show="clothesTable" @click="openSupply" type="primary">
            查看进货记录<i class="el-icon-notebook-2 el-icon--right"></i>
          </el-button>
        </el-form-item>
      </el-form>
      <span class="noteSpan">勾选需进货的服装后点击进货按钮</span>
      <el-table class="table" :data="tableData" row-key="clothesId" style="width: 100%" v-loading="loading"
        :default-sort="{ prop: 'index', order: 'descending' }" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" :reserve-selection="true"> </el-table-column>
        <el-table-column type="index" label="序号" sortable width="100">
        </el-table-column>
        <el-table-column prop="brand" label="服装品牌" width="100">
        </el-table-column>
        <el-table-column prop="categoryName" label="类别名称">
        </el-table-column>
        <el-table-column prop="note" label="note" width="80"> </el-table-column>
        <el-table-column prop="size" label="尺寸" width="70"> </el-table-column>
        <el-table-column prop="inventory" label="库存"> </el-table-column>
        <el-table-column prop="clothesIntroduction" label="服装简介">
        </el-table-column>
        <el-table-column prop="material" label="服装材质"> </el-table-column>
        <el-table-column prop="code" label="编码"> </el-table-column>
      </el-table>
    </div>
    <div v-show="supplyTable">
      <el-form :inline="true" :model="supplyForm" class="demo-form-inline">
        <el-form-item label="服装品牌">
          <el-input v-model="supplyForm.brand" placeholder="输入品牌进行查询……"></el-input>
        </el-form-item>
        <el-form-item label="服装编码">
          <el-input v-model="supplyForm.code" placeholder="输入服装编码……"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="findSupplyData" type="primary" icon="el-icon-search">
            搜索
          </el-button>
          <el-button @click="openClothes" type="primary">
            <i class="el-icon-arrow-left"></i> 返回
          </el-button>
        </el-form-item>
      </el-form>
      <el-table class="table" :data="supplyTableData" style="width: 100%" v-loading="loading"
        :default-sort="{ prop: 'index', order: 'descending' }" @selection-change="handleSelectionChange">
        <el-table-column type="index" label="序号" sortable width="50">
        </el-table-column>
        <el-table-column prop="brand" label="服装品牌" width="80">
        </el-table-column>
        <el-table-column prop="categoryName" label="类别名称">
        </el-table-column>
        <el-table-column prop="note" label="note" width="80"> </el-table-column>
        <el-table-column prop="size" label="尺寸" width="60"> </el-table-column>
        <el-table-column prop="clothesIntroduction" label="服装简介">
        </el-table-column>
        <el-table-column prop="material" label="服装材质"> </el-table-column>
        <el-table-column prop="quantity" label="数量" width="50">
        </el-table-column>
        <el-table-column prop="supplyPrice" label="单价"> </el-table-column>
        <el-table-column prop="supplyTotalPrice" label="总价">
        </el-table-column>
        <el-table-column prop="supplyTime" label="时间"> </el-table-column>
        <el-table-column prop="code" label="编码"> </el-table-column>
      </el-table>
    </div>
    <el-pagination style="margin: auto; margin-top: 8px" v-show="supplyTable" :hide-on-single-page="value"
      :current-page.sync="supplyCurrentPage" :page-size="5" :pager-count="11" layout="prev, pager, next"
      :total="this.supplyTotal" @current-change="handleSizeChange">
    </el-pagination>
    <el-pagination style="margin: auto; margin-top: 8px" v-show="clothesTable" :hide-on-single-page="value"
      :current-page.sync="currentPage" :page-size="6" :pager-count="11" layout="prev, pager, next" :total="this.total"
      @current-change="handleSizeChange">
    </el-pagination>
  </div>
</template>
<script>
import { request } from "@/network/request/request";
export default {
  mounted() {
    this.findData();
    this.findSupplyData();
  },
  data() {
    return {
      formInline: {
        brand: "",
        code: "",
      },
      supplyForm: {
        brand: "",
        code: "",
      },
      clothesTable: true,
      supplyTable: false,
      supplyButton: true,
      selectedRows: [],
      value: false,
      currentPage: 1, // 当前页码
      supplyCurrentPage: 1, // 当前页码
      pageSize: 6, // 每页显示的记录数
      total: 0, // 总个数  //默认设置 0
      supplyTotal: 0, // 总个数  //默认设置 0
      tableData: [],
      supplyTableData: [],
      loading: false,
      supplyClothesBox: false,
      rules: {
        inputPrice: [
          { required: true, message: '请输入价格', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur,change' }
        ], inputQuantity: [
          { required: true, message: '请输入店铺简介', trigger: 'blur' },
        ],
      }
    };
  },
  methods: {
    time() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
      }, 600);
    },
    getRowKeys(row) {
      return row.id;
    },
    supply() {
      this.supplyClothesBox = true;
    },
    handleSizeChange() {
      this.findData();
      this.findSupplyData();
    },
    handleSelectionChange(selectedItems) {
      this.selectedRows = selectedItems;
      localStorage.setItem("selectedSupplyRows", this.selectedRows);
      this.selectedRows.forEach((item) => {
        this.$set(item, "inputPrice", null);
        this.$set(item, "inputQuantity", null);
      });
    },
    async findData() {
      this.time();
      const storeId = localStorage.getItem("storeId");
      if (storeId == 0) {
        this.$message.error("无店铺数据！");
        return;
      }
      const params = {
        currentPage: this.currentPage /* 当前页码 */,
        pageSize: this.pageSize /* 页码大小 */,
        storeId: localStorage.getItem("storeId"),
        brand: this.formInline.brand /* 品牌 */,
        code: this.formInline.code /* 编码 */,
      };
      const config = {
        url: "api/user/clothes",
        method: "get",
        params: params,
      };
      const res = await request(config);
      if (res.data.code === 1) {
        this.total = res.data.data.total; /* 得到数据的总数 */
        this.tableData = res.data.data.pageList; /* 得到数据 */
      }
    },
    async confirmSupply() {
      console.log(this.selectedRows);
      for (let val of this.selectedRows) {
        console.log(val);
        if (val.inputQuantity < 0 || val.inputPrice < 0 || val.inputQuantity === 0 || val.inputPrice === 0 || val.inputQuantity === null || val.inputPrice === null) {
          this.$message.error("请检查数量和价格");
          return;
        }
      }
      const config = {
        url: "api/user/purchase",
        method: "post",
        data: {
          selectedRows: this.selectedRows,
        },
      };
      const res = await request(config);
      if (res.data.code == 1) {
        this.$message.success("添加成功");
        this.findData();
        this.findSupplyData();
        this.supplyClothesBox = false;
      }
    },
    openSupply() {
      this.findSupplyData();
      this.clothesTable = false;
      this.supplyButton = false;
      this.supplyTable = true;
    },
    openClothes() {
      this.supplyTable = false;
      this.clothesTable = true;
      this.supplyButton = true;
      this.findData();
    },
    async findSupplyData() {
      this.time();
      const storeId = localStorage.getItem("storeId");
      if (storeId == 0) {
        this.$message.error("无店铺数据！");
        return;
      }
      const params = {
        currentPage: this.supplyCurrentPage /* 当前页码 */,
        pageSize: 5 /* 页码大小 */,
        storeId: localStorage.getItem("storeId"),
        brand: this.supplyForm.brand /* 品牌 */,
        code: this.supplyForm.code /* 编码 */,
      };
      const config = {
        url: "api/user/purchase",
        method: "get",
        params: params,
      };
      const res = await request(config);
      if (res.data.code === 1) {
        this.supplyTotal = res.data.data.total; /* 得到数据的总数 */
        this.supplyTableData = res.data.data.pageList; /* 得到数据 */
      }
    },
  },
};
</script>
<style scoped>
.con_store_main {
  height: 498px;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
}

.noteSpan {
  color: rgb(210, 210, 210);
  margin-left: 6px;
  font-size: 13px;
  font-weight: bold;
}

.supply-input {
  display: flex;
  margin: 4px;
}

.supply-span {
  font-size: 18px;
  margin: 4px;
  padding-bottom: 12px;
}

.dialog-content-container {
  max-height: 600px;
}
</style>